﻿<!DOCTYPE HTML>
<html>
<head>
   <title>Demo7</title>
   <meta charset="utf-8">
   
<style type="text/css">
#div1 {width:350px;
       height:70px;
       padding:10px;
	   border:1px solid #aaaaaa;
	   }
</style>

</head>
<body>
<p>拖动 w3cschool.cn 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="107.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>

<script>
	function allowDrop(ev)
	{
	ev.preventDefault();
	}

	function drag(ev)
	{
	ev.dataTransfer.setData("Text",ev.target.id);
	}

	function drop(ev)
	{
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
	}
</script>
</html>